import React from "react";
import ReactDOM from "react-dom/client";

// 1. 创建一个 Context 对象，并设置一个默认值，比如 100
const MyContext = React.createContext(100);
console.log(MyContext);
// 小玩意，displayName 属性，可以设置，设置完之后，开发者工具中的名字改了。
MyContext.displayName = "Hello";

class A extends React.Component {
  render() {
    console.log("A - ", this);
    return (
      <div>
        <h1>A - {this.context}</h1>
      </div>
    );
  }
}
// 2. A.contextType = 第一步中创建的 Context 对象
//    A 组件类的 this.context 的值，就是 100
A.contextType = MyContext;

class B extends React.Component {
  // 2. 通过 static contextType = 第一步中创建的 Context 对象
  //    B 组件类的 this.context 的值，就是 100

  static contextType = MyContext;

  render() {
    console.log("B - ", this);
    return (
      <div>
        <h1>B - {this.context}</h1>
      </div>
    );
  }
}

/**
 * 函数式组件如何获取Context对象的值呢
 *
 * Context.Consumer 组件
 */
function C() {
  console.log(this); // undefined
  return (
    <MyContext.Consumer>
      {(a) => {
        console.log(a, "===");
        return (
          <div>
            <h1>C - {a}</h1>
          </div>
        );
      }}
    </MyContext.Consumer>
  );
}

class D extends React.Component {
  state = {
    name: "张三",
  };
  render() {
    console.log("D", this);
    return (
      <div>
        <h1>D</h1>
        {this.props.children(this.state.name)}
      </div>
    );
  }
}

// C.contextType = MyContext; // not supper

/**
 * 一般推荐将 Provider 组件，使用在 App 组件上
 *    App 组件的后代所有组件都可以用到 Provider 的数据
 *
 * 1. 必须要设置 value 属性，属性的值，就是提供给后代组件去用的。
 */
class App extends React.Component {
  state = {
    count: 200,
  };

  render() {
    return (
      // <MyContext.Provider value={{ name: '张三', age: 18, fn1: () => {} }}>

      <MyContext.Provider value={this.state.count}>
        <div>
          <h1>App</h1>
          <button
            onClick={() => {
              // this.setState((prevState) => {
              //   return {
              //     count: prevState.count + 1,
              //   };
              // });

              this.setState((prevState) => ({ count: prevState.count + 1 }));
            }}
          >
            count++
          </button>

          <A />

          <B />

          <C />

          <D>
            {(name) => {
              console.log(name, "===");
              return <p>安德森发大水发大水发</p>;
            }}
          </D>
        </div>
      </MyContext.Provider>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
